<template>
	<view :class="currentTheme">
		<a-nabbar :name="option.label||'偏好设置'" />
		<view class="u-text-center text-order-time u-font-22 u-padding-24">设置贵店偏好的剧本类型</view>
		<view class="u-padding-left-32 u-padding-right-32 scroll-view">
			<view v-for="(item,index) in selectList" :key="index" class="u-margin-bottom-20" v-if="isShow">
				<select-items :item="item" v-model="item.checked" span="4">
					<view slot="title"></view>
					<view slot="inner-title" class="inner-title u-font-28 box-title u-border-bottom">
						<text class="u-margin-left-20">{{item.cateName}}</text>
					</view>
				</select-items>
			</view>
		</view>
		<fixed-team>
			<view class="u-flex u-flex-1">
				<view class="u-flex-1" v-if="option.isLogin==1">
					<item-btn type="plain" height="88" width="100%" @click="goPath('index')">下次再说</item-btn>
				</view>
				<view v-if="option.isLogin==1" style="width: 40rpx;"></view>
				<view class="u-flex-1">
					<item-btn height="88" width="100%" :loading="loading"
				@click="savaLike">保存设置</item-btn>
				</view>
			</view>
		</fixed-team>
	</view>
</template>

<script>
	import {getList,getDetail,add} from '@/api/crud.js'
	import selectItems from '@/components/selectArr/selectArr.vue'
	export default {
		components: {
			selectItems
		},
		data() {
			return {
				selectList: [],
				apiModule:"shopApi",
				apiType:'userPreference',
				option:{},
				checked:[],
				isShow:false,
				loading:false
			}
		},
		computed: {
			uid() {
				return this.$store.getters.loginForm.uid; 
			}
		},
		async onLoad(option) {
			this.option = option;
			
			// this.valiDateMixin('store')
			try{
				await this.$store.dispatch('getClassify').then(res=>{
					this.selectList = res.filter(val=>['剧本类别','剧本背景','剧本题材'].includes(val.cateName))
				})
				await getDetail('',this.apiType+'/findGroupByUid',this.apiModule,this.uid).then(res=>{
					//this.checked = res || [];
					this.selectList = this.selectList.map(val=>{
						const item = res.find(k=>k.groupId===val.id);
						this.$set(val,'checked',[]);
						if(item){
							const checked = Array.isArray(item.userPreferenceList)&&item.userPreferenceList.map(val=>val.categoryId)
							this.$set(val,'checked',checked)
						}
						return val;
					})
					console.log(this.selectList)
					this.isShow = true;
				})
			}catch(e){
				//TODO handle the exception
			}
		},
		methods: {
			goPath(url) {
				this.$u.route({
					type:"reLaunch",
					url:`/pages/${url}/${url}`
				})
			},
			//保存设置
			savaLike(){
				let checked = [];
				this.selectList.forEach(val=>{
					checked = [...checked,...val.checked]
				})
				console.log(checked)
				if(checked.length===0){
					this.$u.toast('请选剧本偏好设置')
					return false;
				}
				this.loading = true;
				add(checked,this.apiType+'/save',this.apiModule,this.uid).then(res=>{
					this.loading = false;
					this.$u.toast('设置成功');
					this.option.isLogin==1 ? this.goPath("index") : this.$u.route({type:"back"}) //登录时跳转到首页或者是个人中心返回到上一页
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.inner-title{
		line-height: 60rpx;
	}
</style>
